{include="header"}

{function="carouFredSel()"}

<div class ="wrapper">

	<div class = "main" id = "promotion">
		<h1 class = "fr">{$e['promotion']}</h1>

		<div class = "content">
			{if="$promotion[image] != ''"}
			<div class = "display">
				<img src = "{$promotion[image]}" height = "135" width = "180">
			</div>
			{/if}

			<span class = "about-content">{$promotion['detail']}</span>
		</div>

		<div id = "wrapper-relate" class = "clear">
			<h3>{$e['other-promotion']}</h3>
			<img src="images/btn-prev.png" id = "btn-prev" class = "btn-prev">
			<img src="images/btn-next.png" id = "btn-next" class = "btn-next">
			<ul id = "relate">
				{loop="all_promotion"}
				<li>
					<a href = "promotion.html?id={$value.id}">
						<img src = "{$value.thumb}" class = "thumb">
						<span class = "desc">{$value.promotion}</span>
					</a>
				</li>
				{/loop}
			</ul>
		</div>
	</div>

	<div class = "sidebar">
		<ul>
			<li>{$e['promotion']}</li>
			<li><a href = "promotion.html">{$e['promotion']}</a></li>
		</ul>
	</div>
</div>

<script>

$(document).ready(function(){
    $("#relate").carouFredSel({
		auto : false,
		circular : false,
		infinite : false,
		excludedElements: "button, input, select, textarea, .noSwipe",
		width: 621,
		prev : {
			button : "#btn-prev",
			key : "left"
		},
		next : {
			button : "#btn-next",
			key : "right"
		},
		swipe : {
			onTouch : true,
		}
	});
});
</script>

{include="footer"}